<script setup>
import Line from './line.vue'
import { Apage, gethomeData } from '../common'

const xData = ref([])
const yData = ref([])

const xData2 = ref([])
const yData2 = ref([])

const xData3 = ref([])
const yData3 = ref([])

// const getData = () => {
//   let a = parseInt(Math.random() * (400 + 1))
//   let b = parseInt(Math.random() * (400 + 1))
//   let c = parseInt(Math.random() * (400 + 1))
//   let d = parseInt(Math.random() * (400 + 1))
//   let e = parseInt(Math.random() * (400 + 1))
//   let f = parseInt(Math.random() * (400 + 1))
//   let g = parseInt(Math.random() * (400 + 1))
//   let arr = [a, b, c, d, e, f, g]
//   let arr1 = [b, a, c, f, d, g, e,]

//   // 图表一
//   xData.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
//   yData.value = [
//     { name: '电导率', data: arr, startColor: 'rgb(235, 162, 78)', endColor: 'rgb(255, 231, 197)', },
//   ]


//   // 图表二
//   xData2.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
//   yData2.value = [
//     { name: '颗粒度', data: arr1, startColor: 'rgb(17, 112, 15)', endColor: 'rgb(138, 218, 154)' },
//     // { name: '电导率1', data: arr1, startColor: 'rgb(128, 255, 165)', endColor: 'rgb(1, 191, 236)' },
//   ]

//   // 图表三
//   xData3.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
//   yData3.value = [
//     { name: '动力粘度', data: arr1, startColor: '#b45309', endColor: '#fcd34d' },
//     { name: '40度粘度', data: arr1, startColor: '#4d7c0f', endColor: '#bef264' },
//     { name: '100度粘度', data: arr1, startColor: '#1d4ed8', endColor: '#93c5fd' },
//   ]


// }

// getData()




const showBTm = ref(true)

const appStore = useAppStore()

const emit = defineEmits(["tapMoreFn", "openDialogFn", "openEchartFn", "dblclickEcharts"])
const tapMore = () => {
  if (appStore.isMobile) {
    showBTm.value = false
  }
  emit('tapMoreFn')
}

const openDialog = () => emit('openDialogFn')
const openEchart = () => emit('openEchartFn')



// 新加折现图数据入参
const optionsList = [
  {
    key: 0,
    label: '小时',
  },
  {
    key: 1,
    label: '一日',
  },
  {
    key: 2,
    label: '一月',
  },
  {
    key: 3,
    label: '三个月',
  },
  {
    key: 4,
    label: '半年',
  },
  {
    key: 5,
    label: '一年',
  },
]

const userStore = useUserStore()

function handleSelectTime(key) {
  userStore.timeValue = key
  gethomeData(true)
}


const timeLabel = computed(() => {
  let item = optionsList.find(v => v.key == userStore.timeValue)
  if (item) {
    return item.label
  }
})


function tabLineItem(item) {
  emit('dblclickEcharts', item)
}


</script>

<template>
  <!-- xwmd:(w-[30.9%]) xwlg:(w-[22.3%]) -->
  <div class=" flex flex-col  wxwxs:(w-full) xwsm:(w-[30.9%])">
    <div class="h-[13%] flex items-center">

    </div>
    <div class="flex items-center  xwxs:(mt-[55px] mb-[20px]) xwmd:(mt-[5px] mb-0)">
      <img class="w-[30px] h-[30px]" src="../../../assets/home/lishi 1.png" alt="">
      <span class=" min2_color font-bold mx-[10px] font_Electronic xwxs:(text-[70px]) xwsm:(text-[30px])">历史数据</span>



      <n-dropdown size="huge" trigger="hover" :options="optionsList" @select="handleSelectTime">
        <el-button
          class=" rounded-[10px] flex justify-center items-center ml-auto xwxs:(w-[270px] h-[90px]) xwsm:(w-[120px] h-[30px])"
          color="#009757">
          <span class="xwxs:(text-[56px]) xwsm:(text-[16px]) font-medium text-white">{{ timeLabel }}</span>
        </el-button>
      </n-dropdown>





      <el-button
        class=" rounded-[10px] flex justify-center items-center ml-auto xwxs:(w-[270px] h-[90px]) xwsm:(w-[90px] h-[30px])"
        color="#009757" @click="openDialog">
        <span class=" font-medium text-white xwxs:(text-[56px]) xwsm:(text-[16px])">阈值</span>
      </el-button>

      <el-button
        class=" rounded-[10px] flex justify-center items-center ml-auto xwxs:(w-[270px] h-[90px]) xwsm:(w-[90px] h-[30px])"
        color="#009757" @click="openEchart">
        <span class="xwxs:(text-[56px]) xwsm:(text-[16px]) font-medium text-white">折线图</span>
      </el-button>

    </div>
    <!-- // -->
    <div class="flex-1 flex flex-col gap-[8px] my-[16px] xwxs:(hidden ) xwsm:(flex)  xwmd:(h-[27.6%]) ">
      <template v-for="(item, index) in Apage" :key="index">

        <div @dblclick="tabLineItem(index)"
          class=" rounded-[16px] p-[10px] xwxs:(h-[900px] mb-[66px]) xwmd:(flex-1 mb-0) "
          style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
          <Line :yData='item.ydata' :xData='item.xdata' :markline="item.markline"></Line>
        </div>
      </template>

      <!-- <div class="flex-1 rounded-[16px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line subtext="当前检测标准  NAS638" title="颗粒度" :yData='yData2' :xData='xData2'></Line>

      </div>
      <div class="flex-1 rounded-[16px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line :yData='yData3' :xData='xData3'></Line>
      </div> -->
    </div>
    <!-- // -->
    <div class="mt-auto mb-[34px] xwxs:(hidden ) xwsm:(flex)">
      <el-button @click="tapMore" class="w-full  rounded-[8px] text-white xwxs:(h-[180px]) xwmd:(h-[34px])"
        color="#009757">
        <span class="text-white  font-medium xwxs:(text-[56px]) xwmd:(text-[18px])">更多</span>
        <svg t="1721144972549" class="icon w-[20px] h-[20px] ml-[10px]" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3496" width="30" height="30">
          <path d="M73.4 328.1L509.6 764l439-435.8-45.1-45.5-393.8 390.9-391.1-390.8z" p-id="3497" fill="#ffffff">
          </path>
        </svg>
      </el-button>
    </div>











  </div>
</template>

<style scoped></style>
